<template>
    <div class="parts-w">
        <div class="tabsel border-bottom-1px">
            <div class="tabsel-item" v-for="(item, index) in tabParams" @click="showDrop(index,true)" v-bind:class="{'active':isAcitve==index}"><span>{{item}}<i class="mint-cell-allow-donw"></i></span></div>
        </div>
        <div class="drop" v-show="dropShow">
            <div class="mask-black" @click="showDrop(null,false)"></div>
            <ul><li v-for="(item, index) in showDrorams" class="dropitem border-bottom-1px" v-bind:class="{'act':filterKey[isAcitve] === item}" @click="filtrate(item,index)">{{item}}</li></ul>
        </div>
        <div class="loading-container" v-show="!proList.length">
            <loading :desc="loadingDesc" :showimg="loadingShowimg"></loading>
        </div>

        <!-- content -->
          <div class="parts-list" ref="partsw">
            <div>
              <!-- 列表 -->
              <div class="page-cell">
                    <a :href="'./details.html?id='+item.id" class="border-bottom-1px mint-cell" v-for="(item, index) in proList">
                    <span class="mint-cell-mask"></span>
                    <div class="mint-cell-con">
                         <img @load="loadImage" v-lazy="item.photo" class="part-img">
                         <span class="mint-cell-text">
                                <strong>产品名称：{{item.productName}}</strong>
                                <span>适用机型：{{item.applicableModel}}</span>
                                <span>使用行业：{{item.useIndustry}}</span>
                                <span>品牌：{{item.brand}}</span>
                         </span>
                    </div>
                </a>              
                </div>
              <!-- 
                1、底部提示信息 
                2、这里有一种情况,就是没有更多数据时,这里的文本应该显示"暂无更多数据"
              -->
              <div class="bottom-tip" v-show="proList.length">
                <span class="loading-hook">{{bottomTip}}</span>
              </div>
            </div>
          </div>
          <!-- content end  -->
    </div>
</template>

<script type="text/ecmascript-6">
    import Loading from 'components/loading/loading';
    import BScroll from 'better-scroll';
    import apiUrl from '../../../config/api';
    import axios from 'axios';
    var tempArr = ['产品名称', '适用机型', '使用行业', '品牌'];
    export default {
        data() {
            return {
                loadingDesc: '正在载入...',
                loadingShowimg: true,
                filterKey: ["", "", "", ""],
                topTip: '下拉刷新',
                bottomTip: '查看更多',
                pageSize: 10,
                pageIndex: 1,
                pageCount: 0,
                proList: [], // 展现数据

                isAcitve: null,

                tabParams: ['产品名称', '适用机型', '使用行业', '品牌'],
                dropParams: [
                    ['卡特彼勒滤芯', '卡特彼勒柴油机油', '卡特彼勒燃气机油', '卡特彼勒冷却液', '卡特彼勒智讯系统', '利星行机械客户服务合约', '利星行机械差异化服务', '利星行机械燃油系统解决中心', '卡特彼勒阀和阀座', '取消筛选'],
                    ['ALL', '取消筛选'],
                    ['油田', '发电', '工业', '船用', '取消筛选'],
                    ['卡特彼勒', '曼海姆', '铂金斯', 'MTU', '约翰迪尔', '康明斯', '其他发动机设备','取消筛选']
                ],
                showDrorams: [],                    
                dropShow: false
            }
        },
        created() {
            this._getdata();
            this.$nextTick(() => {
                this._initScroll();
            })
        },
        methods: {
            photourl(argument) {
                let resdata = argument;
                for (var i = resdata.length - 1; i >= 0; i--) {
                    let photo = resdata[i].photo;
                    photo = photo.split("|");
                    resdata[i].photo = photo[1]
                }
                return resdata;
            },
            _initScroll() {
                this.PartListScroll = new BScroll(this.$refs.partsw, {
                    click: true
                });
                var _this = this;
                this.PartListScroll.on('touchend', function(position){
                    if(position.y < (this.maxScrollY - 30)) {
                        _this.bottomTip = '加载中...';
                        setTimeout(function () {
                            if(_this.pageCount >= _this.pageIndex){

                                _this.pageIndex += 1;
                                _this._getdata();
                                // 加载更多后,重新计算滚动区域高度
                                _this.PartListScroll.refresh();
                                _this.bottomTip = '查看更多';
                            }
                            _this.bottomTip = '暂无更多数据';
                        }, 1000);
                    }else {
                        _this.bottomTip = '查看更多';
                    }
                });
                
            },
            _getdata() {
                axios({
                    method:'get',
                    url: apiUrl.ljfwgl + '?productName=' + this.filterKey[0] + '&applicableModel=' + this.filterKey[1] + '&useIndustry=' + this.filterKey[2] + '&brand=' + this.filterKey[3] + '&pageNo=' + this.pageIndex + '&pageSize='+ this.pageSize,
                }).then(response => {
                    if (response.data.code === 'SUCCESS') {
                        if(response.data.data.list.length > 0){
                            this.photourl(response.data.data.list)
                            this.pageCount = Math.ceil(response.data.data.count / this.pageSize);
                            if(response.data.data.count < 10) {
                                this.bottomTip = '暂无更多数据';
                            }                            
                            for (var i = 0; i < response.data.data.list.length; i++) {
                                this.proList.push(response.data.data.list[i]);
                            }
                        } else {
                            this.loadingDesc = '该栏目下没有数据！';
                            this.loadingShowimg = false;
                        }
                    }
                });
            },
            filtrate(item, index) {
                if(item !== '取消筛选') {
                    this.filterKey[this.isAcitve] = item;
                    this.tabParams[this.isAcitve] = item;
                } else {
                    this.filterKey[this.isAcitve] = '';
                    this.tabParams[this.isAcitve] = tempArr[this.isAcitve];
                }
                this.proList = [];
                this.pageIndex = 1;
                this._getdata();
                this.dropShow = false;
                this.isAcitve = null;
            },
            showDrop(index, isshow) {
                this.showDrorams = this.dropParams[index]
                this.dropShow = isshow;
                this.isAcitve = index;
            },
            loadImage() {
                this.PartListScroll.refresh();              
            }
        },
        components: {
            Loading
        },
    }
</script>

<style scoped lang="less" rel="stylesheet/less">
    @import '../../common/less/index';
    .tabsel{
        display: flex;
        height: 45px;
         .border-bottom-1px(@color-border);
    }
    .tabsel-item{
        flex: 1;
        text-align: center;
        display: block;
        overflow: hidden;
        .border-right-1px(@color-border);
        height: 25px;line-height: 25px;
        margin-top: 10px;
        font-size: @font-size-small-s;
        &:last-child{.border-none();}
        span{
            display: inline-block;
            width: 75%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            padding-right: 10px;
        }
        &.active{
            color: @color-bg-active;
            .mint-cell-allow-donw:after{
                transform: translateY(-80%) rotate(-45deg);
                border-color:@color-bg-active;
            }
        }
    }
    .mint-cell-allow-donw:after {
        font-size: @font-size-small;
        transition: all .3s;
        border: 2px solid #c8c8cd;
        border-bottom-width: 0;
        border-left-width: 0;
        content: " ";
        top: 50%;
        right: 5px;
        position: absolute;
        width: 5px;
        height: 5px;
        transform: translateY(-80%) rotate(135deg);
    }
    
    
    .drop{
        position: absolute;
        transition: all 6s;
        top:45px;
        width: 100%;
        bottom: 0;
        z-index: 66666;
        ul{
            z-index: 67;
            position: relative;
            background-color: @color-bg-white;
            width: 100%;
            .dropitem{
                .border-bottom-1px(@color-border);
                height: 44px;
                line-height: 44px;
                text-indent: 14px;
                &.act{
                    color: @color-bg-active;
                }
            }
            
        }
        .mask-black{
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
        }
    }

    .loading-container{
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 888;
    }

    .parts-list{
        position: absolute;
        top: 45px;
        bottom: 0;
        overflow: hidden;
        width: 100%;
    }


    .mint-cell{
        margin: 0 15px;
        .border-bottom-1px(@color-border);
        padding-bottom: 15px;
    }
    .mint-cell-con{
        padding-top: 15px;
        display: flex;
    }
    .part-img{
        flex: 0 0 120px;
        width: 120px;
        height: 95px;
        border: 1px solid @color-border;

    }
    .mint-cell-text{
        flex: 1;
        font-size: @font-size-small-s;
        color: @color-text-666;
        padding-left: 10px;
        box-sizing: border-box;
        line-height: @font-size-meduim-x;
        strong{
            display: block;
            color: @color-text-333;
            font-size: @font-size-small;
            margin-bottom: 8px;
        }
        span{
            display: block;
        }
    }
    .bottom-tip{
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #777;font-size: 12px;
    }
</style>
